<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 将带有v-clock属性的标签进行隐藏 */
        [v-v-clock]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-clock>
        <!-- 
            1.用于显示双大括号{{}}
            2.跳过这个元素和它的子元素这样可以提高性能
         -->
        <span v-pre>{{整日都很无聊的阿呆想睡觉}}</span>
        <!-- 
            v-text可以避免双大括闪烁 
            如果使用双大括又不想有闪烁
            在vue的入口节点上添加v-clock指令
        -->
        <h3>{{msg}}</h3>
        <h3>{{msg}}</h3>
        <h3>{{msg}}</h3>
        <h3 v-text="msg"></h3>
        <h3 v-text="msg"></h3>
        <h3 v-text="msg"></h3>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"xiaochen",
            }
        })
    </script>
</body>
</html>